﻿{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}琢越网{% endblock %}

{% block custom_js %}
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'js/fileinput.js' %}"></script>
{% endblock %}
{% block custom_css %}
    <link rel="stylesheet" href="{% static 'css/fileinput.css' %}">
    <link rel="stylesheet" href="{% static 'css/mystyle.css' %}">
{% endblock %}

{% block content %}
    <div class="row clearfix">
        <div class="col-md-9 column col-div"> <!信息展示区>
            <form method="post" class="form-horizontal" role="form">
                {% csrf_token %}
				<h4 class="text-center" style="font-weight:bold">个人信息</h4>
				<hr>
				<div class="form-group"> <!邮箱>
                    <label for="e-mail" class="col-sm-2 control-label" >邮箱</label>
					<div class="col-sm-4">
						<input name="email" class="form-control" id="e-mail" disabled="disabled" value="{{ request.user.email }}"/>
					</div>
					<div class="col-sm-2">
						<a onclick="verify()" role="button" id="changePassword" class="red-but" data-toggle="modal"/>修改密码</a>
					</div>
				</div>

				<div class="form-group"> <!用户名>
                    <label for="username" class="col-sm-2 control-label">用户名</label>
					<div class="col-sm-4">
						<input name="username" class="form-control" id="username" disabled="disabled"  value="{{ request.user.username }}"/>
					</div>
					<div class="col-sm-2">
						<button type="button" id="changeUsername" class="red-but">修改用户名</button>{{ msg }}
					</div>
				</div>
				<div class="form-group"> <!昵称>
                    <label for="nick_name" class="col-sm-2 control-label">昵称</label>
					<div class="col-sm-4">
						<input name="nick_name" class="form-control" id="nick_name" value="{{ request.user.nick_name }}"/>
					</div>
				</div>
                <form enctype="multipart/form-data" method="post" action="{% url 'users:image_upload' %}">
                    <div class="form-group"> <!头像>
                        <label class="col-sm-2 control-label">头像</label>
                        <div class="col-sm-4">
                            <img alt="140x140" class="img" src="{% static 'img/man2.png' %}" width=100% >
                        </div>
                        <div class="col-sm-2">
                             <button type="button" class="btn btn-default" data-toggle="modal" data-target="#uploadModal">上传头像</button>
                        </div>
                            <!模态框>
                            <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                &times;
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">选择上传文件</h4>
                                        </div>
                                        <div class="modal-body"> <!上传框>
                                            <input id="upload" type="file" class="file" style="height:300px" maxFileCount：5></input> <! data-show-preview="false">
                                        </div>

                                    </div>
                                </div>
                            </div>
                    </div>
                    {% csrf_token %}
                </form>
				<div class="form-group"> <!性别>
					 <label for="gender" class="col-sm-2 control-label">性别</label>
					<div class="col-sm-4">
						<input name="gender" class="form-control" id="gender" value="{{ request.user.gender }}"/>
					</div>
				</div>
				<div class="form-group"> <!电话>
					 <label for="phone" class="col-sm-2 control-label">电话</label>
					<div class="col-sm-4">
						<input name="mobile" class="form-control" id="phone" value="{{ request.user.mobile }}"/>
					</div>
				</div>
				<div class="form-group"> <!个人简介>
					 <label for="introduction" class="col-sm-2 control-label">个人简介</label>
					<div class="col-sm-9">
						<textarea name="introduction" class="form-control" style="height:150px;"  placeholder="……" id="introduction"> {{ user.introduction }}</textarea>
					</div>
				</div>
				<div class="form-group"> <!按钮>
					<div class="col-sm-offset-3 col-sm-2">
						 <button type="submit" class="btn btn-default">保存修改</button>
					</div>
					<div class="col-sm-offset-2 col-sm-4">
						 <button type="submit" class="btn btn-default">放弃修改</button>
					</div>
				</div>
			</form>
        </div>
				<div class="col-md-3 column"> <!右部分>
					<div class="row clearfix col-div">	<!用户信息>
						<img alt="140x140" class="img" src="{% static 'img/man2.png' %}" width=50% style="margin-top:10px">
						<h4 style="text-align:center">{{ user.username }}</h4>
						<p style="color:gray;text-align:center">{{ user.introduction }}</p>
						<a class="btn big-but pull-left" href="{% url 'users:user_info' %}">个人中心</a>
						<a class="btn big-but pull-right" href="{% url 'logout' %}">退出登录</a>
					</div>
					<div class="row clearfix col-div"> <!推荐用户>
						<h4 class="text-center" style="font-weight:bold">推荐用户</h4>
						<hr>
						<img src="{% static 'img/2.jpg' %}" width=40px height=40px/>
						<a href="#" style="font-size:14px;color:#525252">用户A</a>
						<button class="btn-link pull-right" style="text-decoration:none"><p style="font-size:14px;color:#525252;font-weight:bold">+关注</p></button>

					</div>

				</div>
	</div>
{% endblock %}
{% block custom_script %}
    <script>
	$(document).ready(function(){
		$("#changeUsername").click(function(){
			$("#username").attr("disabled",false);
		});
	});
// 验证身份提示
	function verify(){
		alert("修改密码的链接已发到您邮箱，请到邮箱验证！");
	}

</script>
{% endblock %}
